<template>
  <div class="field-textarea" @click="$emit('click')">
    <textarea
      :value="value"
      v-bind="$attrs"
      :placeholder="placeholder"
      class="field-textarea__inner"
      :rows="rows"
      :maxlength="maxlength"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange"
    />
    <span v-if="maxlength" class="word-limit">{{ value.length }}/{{ maxlength }}</span>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  inject: {
    formItem: {
      default: null
    }
  },
  props: {
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    rows: {
      type: Number,
      default: 3
    },
    maxlength: {
      type: [String, Number],
      default: undefined
    }
  },
  methods: {
    onInput(e) {
      if (!e.isComposing) {
        this.$emit('input', e.target.value)
      }
    },
    onFocus() {
      this.$emit('focus')
      this.notifyFormItem('focus')
    },
    onBlur() {
      this.$emit('blur')
      this.notifyFormItem('blur')
    },
    onChange() {
      this.$emit('change')
      this.notifyFormItem('change')
    },
    notifyFormItem(type) {
      if (this.formItem) {
        this.formItem.trigger(type)
      }
    }
  }
}
</script>

<style lang="less">
.field-textarea {
  position: relative;
  display: flex;
  align-items: center;
  &__inner {
    font-size: 32px;
    font-family: @font-regular;
    font-weight: 400;
    color: #222;
    line-height: 46px;
    display: block;
    border: 0;
    flex: 1;
    text-align: inherit;
    resize: none;
    background-color: #FAFAFA;
    border-radius: 12px;
    padding: 24px 30px 18px;

    &[disabled] {
      color: #999;
      background-color: transparent;
    }
    &::-webkit-input-placeholder {
      color: #ccc;
    }
  }
  .word-limit {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 24px;
    font-family: @font-regular;
    font-weight: 400;
    color: #CCC;
    line-height: 34px;
    background-color: #fafafa;
  }
}
</style>
